<template>
  <view>

    <view class="pages_wrap">

      <view class="box_on_wrap">
        <view class="box_on_title">
          <view style="align-items: center">
            <text style="margin-left: 10rpx;font-size: 28rpx">上传探店精选美图</text>
          </view>
          <view v-show="type === 3" @click="screenShot()" style="width: 120rpx;height: 50rpx;padding: 6rpx 20rpx;color: #FFFFFF;background: #FF7800;border-radius: 30rpx;float: right">去截图</view>
        </view>

        <view class="tishi_box">
          <text>探友到店精选好图分享啦，上传审核通过后将在商家详情页展示；</text>
        </view>
        <view class="upload_box">
          <u-upload ref="uploadnoe" :deletable="true" :action="action" :header="headers" :form-data="formData" width="324" height="430"
                    name="file" upload-text="上传图片"  :file-list="fileList1" max-count="1" :before-upload="beforeUpload"
                    @on-remove="onRemove1" @on-change="onCchange1" style="background: #F8F8F8">
          </u-upload>
        </view>
      </view>


    </view>

    <view class="bottom-btn-wrap" @click="Tijiao()">
      <view class="bottom-fixed-btn">
        <view class="btn pay">提交</view>
      </view>
    </view>

  </view>
</template>

<script>
import {baseUrl} from "@/api/request";

const app = getApp();
import store from '@/public/store.js'

export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,
      action: baseUrl + '/api/order/upload',
      headers: {
        'authorization': uni.getStorageSync('token'),
        'platform': 0,
      },
      formData: {},
      fileList1: [],
      images1: '', //已上传截图
      platformData: {},
      steuptfour_Popup: false,
      chakanshilie: '',
      LaiYuan: 0,
      type: 0,
      platform: "",
      opsData: {},
      source:  '',//订单列表的来源，1、order：是tabbar导航订单列表；2、pageOrder：是我的里面订单列表
    }
  },
  onLoad(opt) {
    //新增按钮跳转过来的数据——转换
    this.opsData = JSON.parse(decodeURIComponent(opt.data));
    this.source = opt.source
    console.log('新增按钮跳转过来的数据', this.source)
   /* uni.setNavigationBarTitle({
      title: addOps.title + '笔记账号'
    });*/

  },
  methods: {
    beforeUpload(index, list) {
      console.log('上传前回调', index, list);
      uni.showLoading({
        title: '上传中...'
      });
    },
    //订单号和下单时间上传回调
    onCchange1(e) {
      console.log('上传完成回调', e);
      let that = this
      uni.hideLoading();
      let resuleok = JSON.parse(e.data)
      console.log('上传截图', resuleok)
      if (resuleok.result.size > 1048576){
        uni.showToast({
          title: resuleok.msg,
          icon: 'none',
          duration: 3000,
        });
      } else  {
        uni.showToast({
          title: resuleok.msg,
          icon: 'none'
        })
        that.images1 = resuleok.result.show_path
      }
    },
    onRemove1(e) {
      this.images1 = ''
    },
    Tijiao() {
      let that = this
      console.log("提交数据")
      if (that.images1 == '') {
        uni.showToast({
          title: '请上传图片',
          icon: 'none',
          duration: 3000
        })
      } else {
        that.$api.GetCaseImg({
          image_url: that.images1,
          order_id: that.opsData.id,
        }).then(res => {
          console.log('提交成功', res.data.result);
          if (res){
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 4000
            });
            setTimeout(() => {
              if (that.source == 'order'){
                uni.switchTab({
                  url: '/pages/orders/orders_gf?page=1'
                })
              } else if (that.source == 'pageOrder') {
                uni.navigateTo({
                  url: '/subpackageA/pages/orders/orders_gf?page=1'
                })
              }
            }, 2000);
          }

        }).catch(err => {
          console.log('提交报错');
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 4000
          });
        })
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F4F4F4;
}

.one {
  width: 22rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #FF7A01;
  display: block;
  float: left;
}

.one::after {
  content: "";
  display: block;
  background: linear-gradient(90deg, #FFEE9B 60%, rgba(216, 216, 216, 0) 100%);
  width: 38rpx;
  height: 13rpx;
  border-radius: 30rpx;
  margin-top: -15rpx;
  margin-left: -10rpx;
}

.pages_wrap {
  padding: 30rpx;
}

.box_on_wrap {
  padding: 30rpx;
  border-radius: 24rpx;
  background-color: #FFFFFF;
  margin-bottom: 30rpx;
  .box_on_title {
    height: 60rpx;
    //display: flex;
    align-items: center;
    //justify-content: space-between;

    view:nth-child(1) {
      color: $zzy-text-color-333333;
      font-size: 28rpx;
      font-weight: bold;
    }

    view:nth-child(2) {
      color: #FF4E0D;
      font-size: 24rpx;
    }
  }
  .box_on_why {
    width: 40rpx;height: 40rpx;
    margin-left: 10rpx;
    float: left;
    position: relative;
    //截图教程提示css
    .jiaocheng_box {
      text-align: center;
      width: 40rpx;
      height: 80rpx;
      .triangle {
        width: 0;
        height: 0;
        position: absolute;top: 20rpx;left: 0;right: 0;
        margin: 0 auto;
        border-left: 12px solid transparent; /* 左边的边框是透明的 */
        border-right: 12px solid transparent; /* 右边的边框是透明的 */
        border-top: 0px solid transparent; /* 底边是透明的 */
        border-bottom: 10px solid rgba(105,105,105,0.5);; /* 上边是黑色的，形成三角形 */
      }
      .jiaocheng_box_text {
        position: absolute;top: 41rpx;left: calc(100% - 120rpx);
        width: 240rpx;
        height: 50rpx;
        padding: 10rpx;
        background: rgba(105,105,105,0.5);
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }


  .tishi_box {
    text-align: left;
    border-radius: 16rpx;
    padding: 10rpx 20rpx;
    background-color: #FFF8E8;
    color: #fd8211;
    font-size: 24rpx;
    line-height: 38rpx;
  }

  .upload_box {
    margin-top: 20rpx;
    position: relative;
    left: -10rpx;
  }

  .input_box {
    margin-top: 20rpx;
    border-radius: 16rpx;
    border: 1px solid #f6f6f6;
    padding: 4rpx 24rpx;
    background-color: #FDFDFD;
  }
}

.tc_wrap {
  //padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    image {
      width: 300rpx;
      height: 300rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF611E;
      }
    }

    .gif_tu {
      width: 100%;
      //height: 524rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    //margin-top: 36rpx;
    justify-content: center;
    padding: 0 30rpx;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 30rpx auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
        color: #fff;
      }
    }
  }
}
</style>